<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>更改字体大小</title>
</head>
<body>
  <pre id="pre1"></pre>
</body>
<script>
  var str = "";
  for (var a = 1; a <= 4; a++) {
    str = str + "<span onmouseover='big(event)' onmouseout='normal(event)'>第"
        + a + "行内容</span><br>";
  }
  document.getElementById("pre1").innerHTML = str;
  function big(event) {
    event.target.style.fontSize = "150%";
  }
  function normal(event) {
    event.target.style.fontSize = "100%";
  }
  // 使用document对象的createElement方法创建的元素标签内并不显示绑定的事件（不建议使用）
  var span5 = document.createElement("span");
  span5.innerText = "第5行内容";
  // 为创建的对象绑定事件时，须新定义一个方法（方法名是可选的）
  span5.onmouseover = function span5style(event) {
    event.target.style.fontSize = "150%"
  };
  // 可以在定义的方法体内引用已有的方法
  span5.onmouseout = function (event) {
    normal(event)
  };
  document.getElementById("pre1").appendChild(span5);
</script>
</html>